<template>
	<view>
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

		<!-- 导航栏主体 -->
		<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
			<!-- 左侧返回按钮 -->
			<image class="back-icon" src="/static/images/ic_back.png" @click="handleBack"></image>

			<!-- 中间标题 -->
			<text class="title">你的名字</text>

			<!-- 右侧图标（动态显示） -->
			<image v-if="isShowRight" class="right-icon" src="/static/images/ic_search_black.png"
				:style="{ marginRight: rightSafeArea + 'px' }"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-header",
		data() {
			return {
				isShowRight: false,
				statusBarHeight: 20, // 默认状态栏高度
				navBarHeight: 44, // 默认导航栏高度
				rightSafeArea: 0 // 右侧安全区域
			}
		},
		created() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			//获取状态栏高度
			this.statusBarHeight = systemInfo.statusBarHeight

			// 微信小程序适配
			// #ifdef MP-WEIXIN
			const menuRect = uni.getMenuButtonBoundingClientRect()
			this.navBarHeight = (menuRect.top - systemInfo.statusBarHeight) * 2 + menuRect.height
			this.rightSafeArea = systemInfo.windowWidth - menuRect.left // 计算右侧避让距离[6](@ref)
			// #endif
		},
		methods: {
			handleBack() {
				uni.navigateBack() // 返回逻辑
			}
		}
	}
</script>

<style lang="scss">
	/* 状态栏占位 */
	.status-bar {
		width: 100%;
		background-color: #FFFFFF;//与导航栏同色
	}

	/* 导航栏主体 */
	.nav-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		background-color: #FFFFFF;
		position: relative;
	}

	/* 图标通用样式 */
	.back-icon,
	.right-icon {
		width: 48rpx;
		height: 48rpx;
	}

	/* 标题样式 */
	.title {
		font-size: 18px;
		color: #333333;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
</style>